<template>
  <div>
    <!-- <BreakSpace label="维修项目列表" :containerStyle="{ marginBottom: '10px' }" /> -->
    <FilterTable
      ref="table"
      :columns="columns"
      :params="fetchParams"
      :dataSource="dataList"
      :datakey="'rows'"
      :fetchapi="fetchApi"
      :onColumnsChange="(columns) => (this.columns = columns)"
      :onRowSelectChange="selectChange"
      selectionType="single"
      :isSelectColumn="false"
      height="auto"
    >
    </FilterTable>
    <Drawer :visible.sync="action.visible" :title="action.title" width="70%" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <OrderPanel :type="action.type" :rowData="action.data" :chargePartition="chargePartition" :allUser="allUser" @closeDialog="closeHandler" />
    </Drawer>
  </div>
</template>
<script>
import { getRoLogList } from '@/api/claim/dealer/ClaimApplication/index';
import { getWxlxSelect } from '@/api/repair/repairReception/customer';
import OrderPanel from '@/pages/repair/repairManage/repairQuery/OrderPanel.vue';
import { getToken, getUserId, getOwnerCode, removeDataType, getAppId, removeAppId } from '@/assets/js/auth';
import { getAllRepairMaintain, getRepairTypes, getAllUser, getAllDealer, factoryExportRepairHistory } from '@/api/repair/repairManage/repairQuery/index.js';
import moment from 'moment';
export default {
  props: ['vin'],
  components: {
    OrderPanel,
  },
  data() {
    return {
      dataList: [],
      allUser: [],
      dataList1: [],
      chargePartition: [],
      visible: false,
      visibleDrawer: false,
      action: { type: 'add', visible: false, title: '维修工单明细', data: {}  },
      collapse: false,
      infoId: null,
      // topFilterInit: this.topFilterInitFun(),
      flterValue: {}, //参数
      columns: this.creatHeader(),
      columns1: this.creatHeader1(),
      fetchApi: getRoLogList,
      fetchParams: {
        vin: this.vin,
        // ownerCode:getOwnerCode(),
        // appId:getAppId(),
      }, //ipa 接口
      selectedRows: [], //选中经销商
      formList: this.createFormList(),
      formList1: this.createFormList1(),
      saveData: null,
      activeName: '',
      menus: [
        {
          title: '审核记录',
          path: 'tabs/user',
          params: {
            type: 1,
          },
        },
        {
          title: '维修历史',
          path: 'tabs/setting',
          disabled: true,
          params: {
            type: 2,
          },
        },
      ],
    };
  },
  created() {
    this.getWxtypeSelect();
  },
  methods: {
    closeHandler(val, type) {
      this.action.visible = false;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    // 查询收费区分
    async queryChargeList() {
      const res = await queryChargeDifferentiationList();
      if (res.resultCode == 200) {
        let items = res.data.map(x => ({ value: x.CHARGE_PARTITION_CODE + '', text: x.CHARGE_PARTITION_NAME }));
        this.chargePartition = items;
      }
    },
      async getNameByIds(parmas) {
      let res = await getNameByIds(parmas);
      if (res.resultCode == 200) {
        let userList = res.data.map(x => ({ text: x.employeeName, value: x.employeeId + '' }));
        this.columns.find(x => x.dataIndex === 'serviceAdvisor').dictItems = userList;
        this.columns.find(x => x.dataIndex === 'chiefTechnician').dictItems = userList;
        // this.columns.find(x => x.dataIndex === 'technician').dictItems = userList;
        this.columns.find(x => x.dataIndex === 'balanceHandler').dictItems = userList;
        this.allUser = userList;
      }
    },
    async getWxtypeSelect() {
      const res = await getWxlxSelect();
      console.log(this.columns.find((x) => x.dataIndex === 'REPAIR_TYPE_CODE').dictItems);
      this.columns.find((x) => x.dataIndex === 'REPAIR_TYPE_CODE').dictItems = res.data.map((x) => ({
        value: x.REPAIR_TYPE_CODE + '',
        text: x.REPAIR_TYPE_NAME,
      }));
    },
    formChangeHandle(val) {
      console.log(val);
      this.saveData = val;
    },
    //搜索获取数据
    changeHandle(val) {
      this.fetchParams = Object.assign({}, this.fetchParams, val);
      console.log(val);
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      console.log(this.selectedRows);
    },
    //保存
    saveDialog() {
      this.$refs.formPanel1.SUBMIT_FORM();
      if (this.saveData) {
        this.$emit('save', this.selectedRows);
      }
    },
    //取消操作
    closeDialog() {
      this.$emit('close', { visible: false, data: this.selectedRows, type: 'close' });
    },
    chooseOrderNo() {
      this.visible = true;
    },
    add() {},
    createFormList() {
      return [
        {
          type: 'INPUT',
          label: '搜索',
          fieldName: 'title',
          placeholder: '请输入标题名称...',
          rules: [
            { required: true, message: '请输入标题名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          ],
          readonly: true, // 只读
        },
        {
          type: 'SELECT',
          label: '所属分类',
          fieldName: 'cid',
          placeholder: '所属分类',
          itemList: [
            { text: '热点', value: '1' },
            { text: '资讯', value: '2' },
          ],
          rules: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
          disabled: true, // 禁用
        },
        {
          type: 'DATE',
          label: '日期',
          fieldName: 'date',
          placeholder: '选择日期',
          rules: [{ required: true, message: '请选择日期', trigger: 'change' }],
        },
        {
          type: 'RANGE_DATE',
          label: '日期区间',
          style: { minWidth: '200px' },
          fieldName: 'startTime|endTime',
        },
        {
          type: 'MULTIPLE_SELECT',
          label: '兴趣爱好',
          fieldName: 'hobby',
          placeholder: '兴趣爱好',
          itemList: [
            { text: '篮球', value: '1' },
            { text: '足球', value: '2' },
            { text: '乒乓球', value: '3' },
          ],
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
        },
        {
          type: 'INPUT_NUMBER',
          label: '数量',
          fieldName: 'number',
          placeholder: '请输入数量...',
          initialValue: undefined,
          rules: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        },
      ];
    },
    createFormList1() {
      return [
        {
          type: 'INPUT',
          label: '索赔类型',
          fieldName: 'title',
          placeholder: '请输入标题名称...',
          rules: [
            { required: true, message: '请输入标题名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          ],
          readonly: true, // 只读
        },
        {
          type: 'SELECT',
          label: '所属分类',
          fieldName: 'cid',
          placeholder: '所属分类',
          itemList: [
            { text: '热点', value: '1' },
            { text: '资讯', value: '2' },
          ],
          rules: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
          disabled: true, // 禁用
        },
        {
          type: 'DATE',
          label: '日期',
          fieldName: 'date',
          placeholder: '选择日期',
          rules: [{ required: true, message: '请选择日期', trigger: 'change' }],
        },
        {
          type: 'TEXT_AREA',
          label: '故障现象',
          fieldName: 'hobby',
          placeholder: '故障现象',
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
          rows: 3,
          selfCols: 3, // 元素占据几行
        },
        {
          type: 'TEXT_AREA',
          label: '故障原因',
          fieldName: 'hobby',
          placeholder: '故障原因',
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
          rows: 3,
          selfCols: 3, // 元素占据几行
        },
        {
          type: 'TEXT_AREA',
          label: '维修方案',
          fieldName: 'hobby',
          placeholder: '维修方案',
          rules: [{ required: true, message: '请选择兴趣爱好', trigger: 'change' }],
          rows: 3,
          selfCols: 3, // 元素占据几行
        },
        {
          type: 'UPLOAD_IMG',
          label: 'VIN',
          fieldName: 'wayPicture',
          placeholder: '上传身份证...',
          rules: [
            { required: true, message: '请上传身份证', trigger: 'change' },
            { limit: 1, validator: this.validateFn, message: '请上传1张图片', trigger: 'change' },
          ],
          upload: {
            actionUrl: '/api/file/oss/upload',
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
        {
          type: 'UPLOAD_IMG',
          label: '里程（仪表）',
          fieldName: 'wayPicture1',
          placeholder: '上传身份证...',
          rules: [
            { required: true, message: '请上传身份证', trigger: 'change' },
            { limit: 1, validator: this.validateFn, message: '请上传1张图片', trigger: 'change' },
          ],
          upload: {
            actionUrl: '/api/file/oss/upload',
            fixedSize: [5, 3],
            limit: 1,
            isCalcHeight: true,
          },
        },
      ];
    },
    async createDictText(val){
        console.log(val,'valvalval');
        this.action.data.dataType = 1;
        this.action.data.startDate = moment(val.RO_CREATE_DATE).format('YYYY-MM-DD');
        this.action.data.endDate = moment(val.RO_CREATE_DATE).format('YYYY-MM-DD');
        this.action.data.roNo = val.RO_NO;
        this.action.data.ownerCode = val.OWNER_CODE;
        console.log(this.action.data);
        const res = await getAllRepairMaintain(this.action.data);
        if(res.resultCode==200){
          let row = res.data.rows[0];
          this.action.data = row;
          this.action.visible = true;
        }
        console.log(res);
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        { title: '维修工单号', dataIndex: 'RO_NO', sorter: true,
          render: props => {
            if (getAppId() == 'beijing') {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.createDictText(props.row)}>
                  {props.row.RO_NO}
                </el-button>
              </div>
            );
            }else {
              return (
                <div>
                  {props.row.RO_NO}
                </div>
                );
            }
          }
        },
        { title: '维修经销商', dataIndex: 'OWNER_CODE', sorter: true },
        {
          title: '维修类型',
          dataIndex: 'REPAIR_TYPE_CODE',
          sorter: true,
          dictItems:[]
        },
        { title: '维修里程', dataIndex: 'IN_MILEAGE', sorter: true },
        { title: '维修日期', dataIndex: 'RO_CREATE_DATE', sorter: true },
        { title: '备注', dataIndex: 'REMARK', sorter: true },
      ];
    },
    //table表头和数据源
    creatHeader1() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: (props) => {
            return <span>{props.row.index + 1}</span>;
          },
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props) => {
            return (
              <div style="text-align:center">
                <multiuse-button type="text" >
                  删除
                </multiuse-button>
              </div>
            );
          },
        },
        { title: '维修工单号', dataIndex: 'RO_NO', sorter: true },
        { title: '维修经销商', dataIndex: 'dealerName', sorter: true },
        { title: '维修类型', dataIndex: 'roType', sorter: true },
        { title: '维修量程', dataIndex: 'roRange', sorter: true },
        { title: '维修日期', dataIndex: 'roDate', sorter: true },
        { title: '备注', dataIndex: 'roRemark', sorter: true },
      ];
    },
  },
};
</script>

<style lang="less" scoped></style>
